<template>
  <scroller lock-x :height="height" ref="scrollerBottom" @on-scroll-bottom="loading" scroll-bottom-offset="-20" :scroll-bottom-offst="200">
    <div class="first-box">
      <ul class='serve-list'>
        <li v-for="(item,index) in getListData">
          <p class="pr box-size">{{item.name||'检查名称暂无'}} <span class="fr detail btn-active" v-if="selectedIndex==0" @click="showDetail(item)">查看详情</span> </p>
          <div :class="{'no-border':index==getListData.length-1}">
            <p>{{item.time}}</p>
          </div>
        </li>
      </ul>
      <p class="no-data">{{more?"下拉刷新":"没有更多信息"}}</p>
    </div>
  </scroller>
</template>
<script>
import {Scroller} from 'vux'
export default {
  props:["listData","hasmore","pullup","selectedIndex"],
  components: {Scroller},
  name: "",
  data() {
    return {
      height:"",
      onFetching:false,
      list:[],//列表
      more:false,//还有更多数据
    };
  },
  computed:{
    getListData(){
      this.more=this.hasmore||false
      this.list=this.listData || []
      return this.list
    }
  },
  methods: {
    
    loading(){
      if (!this.onFetching) {
        this.onFetching = true
        
        this.pullup(this.resetFun)

      }
    },


    resetFun(){
      setTimeout(() => {
        console.log("重置scroll")
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset()
        })
        this.onFetching = false
      }, 2000)
    },

    showDetail(item){
      console.log(item)
      sessionStorage.setItem("detailId",item.id)
      this.$router.push("/condition/checkinfo")
    }
    
  },
  created() {
    this.height=document.body.offsetHeight-86+"px"
  },
  mounted(){
    this.$nextTick(() => {
      this.$refs.scrollerBottom.reset({top:0})
    })
  }
};
</script>
<style lang="scss" scoped>
.first-box{
  overflow-y: auto;
}
.serve-list {
  font-size: 12px;
  margin: 0 15px;
  // min-height: 100%;
  overflow-y: auto;
  padding: 10px 0;

  li{
    padding: 0 10px;

    >p{
      font-size: 16px;
      color: #666;
      text-indent: 10px;

      .detail{
        width: 70px;
        height: 26px;
        font-size: 12px;
        line-height: 26px;
        border-radius: 13px;
        text-align: center;
        text-indent: 0;
        background: linear-gradient(left,#FF6613,#FFA200);
        background: -webkit-gradient(linear, left bottom, right top, from(#FF6613), to(#FFA200));
        color: #fff;
      }
    }
    >p::before{
      content: "";
      position: absolute;
      padding: 3px;
      top: 50%;
      left: 1px;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      background-color:#FF9F20;
    }
    >div{
      height: 55px;
      border-left: 1px solid #FF9F20;
      padding-top: 5px;
      p{
        color: #999;
        margin-left: 10px;
        height: 32px;
        border-bottom: 1px solid #f2f2f2;
      }
    }
    .no-border{
      border: none;
    }
  }
}
</style>